<template>
  <div class="box">
    <TitleCom>
      <div @click="goRouter" class="btn">招聘广场</div>
    </TitleCom>
    <div class="release-box">
      <h2 class="text-title">发布招聘</h2>
      <div class="inp-box">
        <div class="list" >
          <span class="lable">职位名称：</span>
          <input v-model="jobInpData.jobName" type="text" class="job-name" placeholder="请输入">
        </div>
        <div class="list">
          <span class="lable">学历要求：</span>
          <select v-model="jobInpData.education" placeholder="请选择" name="" id="">
            <option value="">请选择</option>
            <option v-for="(i,index) in selectOptions.Education" :key="index" :value="i">{{i}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">经验要求：</span>
          <select v-model="jobInpData.workingYears" placeholder="请选择" name="" id="">
            <option value="">请选择</option>
            <option v-for="(i,index) in selectOptions.WorkingYears" :key="index" :value="i">{{i}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">工资最低值：</span>
          <select v-model="jobInpData.payMin" placeholder="请选择" name="" id="">
            <option value="">请选择</option>
            <option v-for="(i,index) in selectOptions.PayMin" :key="index" :value="i">{{i}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">工资最高值：</span>
          <select v-model="jobInpData.payMax" placeholder="请选择" name="" id="">
            <option value="">请选择</option>
            <option v-for="(i,index) in selectOptions.PayMax" :key="index" :value="i">{{i}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">薪次：</span>
          <select v-model="jobInpData.payMonth" placeholder="请选择" name="" id="">
            <option value="">请选择</option>
            <option v-for="(i,index) in selectOptions.PayMonths" :key="index" :value="i">{{i}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">福利待遇：</span>
          <label v-for="(i,index) in selectOptions.Welfares" :key="index">
            <input v-model="jobInpData.welfare" :value="i" type="checkbox" name="" id="">
            {{i}}
          </label>
          
        </div>
        <div class="list">
          <span class="lable">工作地点：</span>
          <select v-model="jobInpData.cityId" placeholder="请选择" name="" id="">
            <option value=0>请选择</option>
            <option  v-for="(i,index) in selectOptions.City" :key="index" :value="i.id">{{i.name}}</option>
          </select>
          <select v-model="jobInpData.areaId" placeholder="请选择" name="" id="">
            <option value=0>请选择</option>
            <option v-for="(i,index) in selectOptions.Area" :key="index" :value="i.id">{{i.name}}</option>
          </select>
        </div>
        <div class="list">
          <span class="lable">招聘企业：</span>
          <select v-model="jobInpData.companyId" placeholder="请选择" name="" id="">
            <option value=0>请选择</option>
            <option v-for="(i,index) in selectOptions.Company" :key="index" :value="i.id">{{i.name}}</option>
          </select>
        </div>
        <div @click="subFun" class="sub-btn">发布招聘</div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {defineComponent,reactive,toRefs,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {Initdata} from '../types/release'
import {getRequirement,postJob} from '../http/job'
import TitleCom from '../components/TitleCom.vue'
export default defineComponent({
  components:{TitleCom},
  setup(){
    const router = useRouter()
    const data = reactive(new Initdata())
    onMounted(()=>{
      //获取渲染列表下拉框数据
      getRequirement().then((res:any)=>{
        //由于selectOptions原本已有数据
        data.selectOptions = {...data.selectOptions,...res}
      })

    })

    const goRouter=()=>{
      router.push('./index')
    }

    const subFun =()=>{
      //判断数据是否填写完整
      console.log(data.jobInpData);
      let key:keyof typeof data.jobInpData;
      for (key in data.jobInpData){
        if(!data.jobInpData[key]){
          alert('请先完善信息')
          return
        }
      }
      
      //提交数据到后台
      postJob({
        ...data.jobInpData,
        welfare:data.jobInpData.welfare.join(',')})
        .then((res:any)=>{
          console.log(res);
          alert("发布成功")
      })
    }

    return{
      ...toRefs(data),
      subFun,
      goRouter
    }
  }
})
</script>

<style scoped lang="scss">
.btn{
    font-size: 18px;
    font-weight: 600;
    color: cadetblue;
    border:1px solid cadetblue;
    cursor: pointer;
    padding:10px 15px;
    border-radius: 5px;
}
.box{
    width: 1000px;
    margin: 0 auto;
    box-shadow: 0 6px 18px #999;
}
.text-title{
    padding: 5px 10px;
    border-bottom: 2px solid cadetblue;
    color: cadetblue;
}
.release-box{
    padding:20px 40px;
}
.inp-box{
    display: flex;
    flex-direction: column;
    .list{
        margin-bottom:15px ;
        
        select,.job-name{
            width: 200px;
        }
        .id-select{
             width: 100px;
        }
    }
    .lable{
        display: inline-block;
        width: 100px;
    }
}
.sub-btn{
    width: 200px;
    background: cadetblue;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 10px;
}
</style>